@import url('https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:wght@400;600;700&display=swap');

html[data-theme='dark'] {
    --ifm-navbar-background-color: #1a1b23;
    --ifm-background-color: #1a1b23;
    --ifm-background-surface-color: #242736;

    --ifm-font-color-base: #f2f3fb;

    --ifm-pre-background: #242736;

    --ifm-color-primary: #5d9df1;
    --ifm-link-color: #5d9df1;
    --ifm-heading-color: #f2f3fb;
    --ifm-navbar-link-color: #f2f3fb;

    --docusaurus-highlighted-code-line-bg: rgba(255, 255, 255, 0.1);
    --docsearch-text-color: #8d92af;
}

:root {
    /* use default system font based on https://devhints.io/css-system-font-stack */
    --ifm-font-family-base: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
    --ifm-heading-font-family: 'Lota Grotesque', sans-serif;
    --ifm-font-weight-semibold: 600;
    --ifm-font-color-base: #242736;

    --ifm-navbar-item-padding-horizontal: 1.75rem;
    --ifm-navbar-link-color: #41465d;
    --ifm-navbar-shadow: none;

    --ifm-heading-margin-top: var(--ifm-heading-margin-bottom);
    --ifm-hero-background-color: transparent;

    --ifm-code-background: var(--ifm-pre-background) !important;
    --ifm-code-padding-horizontal: 0.4rem;
    --ifm-code-padding-vertical: 0.2rem;

    --ifm-color-primary-lightest: #5d9df1;
    --ifm-color-primary-lighter: #3a87ee;
    --ifm-color-primary-light: #2e80ed;
    --ifm-color-primary: #1672eb;
    --ifm-color-primary-dark: #1266d5;
    --ifm-color-primary-darker: #1161c9;
    --ifm-color-primary-darkest: #0e50a6;

    --ifm-link-color: hsl(214, 84%, 50%);
    --ifm-link-hover-color: hsl(214, 84%, 65%);
    --ifm-link-hover-decoration: none;
    --ifm-pre-padding: 1.6rem;

    --ifm-footer-background-color: #272c3d;
    --ifm-footer-title-color: #f2f3fb;
    --ifm-footer-link-color: #f2f3fb;
    --max-layout-width: 1680px;

    --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1);

    --ifm-heading-color: #242736;
}

@font-face {
    font-family: 'Lota Grotesque';
    src: url('/font/lota.woff2') format('woff2'),
         url('/font/lota.woff') format('woff');
    font-weight: 600;
}

.footer__title {
    font-size: 1.25rem;
    font-weight: 600;
}

.footer__bottom a {
    opacity: 0.75;
}

.footer__copyright {
    color: var(--ifm-footer-title-color);
}

.navbar__title {
    /* Replaced by SVG */
    display: none;
}

.navbar__inner {
    /* .container */
    max-width: calc(var(--max-layout-width) - 32px);
    padding: 0 var(--ifm-spacing-horizontal);
    width: 100%;
}

.DocSearch-Button-Placeholder {
    font-size: 14px !important;
}

html .DocSearch-Button {
    border-radius: 6px !important;
    font-weight: 400 !important;
    background: #f9fafd;
    border: 1px solid #c1c6dd;

    /* Annoying, but needed */
    /* https://stackoverflow.com/questions/26140050/why-is-font-family-not-inherited-in-button-tags-automatically/26140154 */
    font-family: inherit;
}

html .DocSearch-Button .DocSearch-Search-Icon {
    color: var(--docsearch-muted-color);
}

html[data-theme="dark"] .DocSearch-Button {
    background: none;
    border: 1px solid var(--docsearch-muted-color);
}

html[data-theme="dark"] .DocSearch-Button .DocSearch-Search-Icon {
    color: var(--docsearch-muted-color);
}

.DocSearch-Button:hover {
    box-shadow: none !important;
}

.navbar, .main-wrapper {
    justify-content: center;
}

html.plugin-pages .main-wrapper {
    overflow-x: hidden;
}

.main-wrapper > div {
    max-width: var(--max-layout-width);
}

aside > div > a {
    padding-left: 16px;
}

aside > div > a > b {
    display: none;
}

.dropdown > .navbar__link::after {
    border-color: currentColor;
    border-style: solid;
    border-width: 0.1em 0.1em 0 0;
    content: '';
    display: inline-block;
    height: 0.4em;
    left: 0.3em;
    position: relative;
    vertical-align: top;
    width: 0.4em;
    top: 9px;
    transform: rotate(135deg);
}

.navbar .icon {
    font-size: 0;
    padding: 4px;
    margin-left: 20px;
    line-height: 0;
}

.navbar .icon::before {
    content: '';
    display: block;
    width: 24px;
    height: 24px;
    background-size: cover;
}

.navbar .icon[href*=github]::before {
    background-image: url('/static/img/github-brand.svg');
}

html[data-theme="dark"] .navbar .navbar__link[href*=github]:before {
    background-image: url('/static/img/github-brand-dark.svg');
}

.navbar .icon[href*=discord]::before {
    background-image: url('/static/img/discord-brand.svg');
}

html[data-theme="dark"] .navbar .navbar__link[href*=discord]:before {
    background-image: url('/static/img/discord-brand-dark.svg');
}

.navbar svg[class*=iconExternalLink],
aside svg[class*=iconExternalLink] {
    display: none;
}

header.hero div[class^=heroButtons] {
    justify-content: inherit;
}

article .card h2 {
    margin-top: 0;
}

.tsd-kind-icon,
.menu__link,
.table-of-contents__link {
    text-overflow: ellipsis;
    display: inline-block;
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
}

.tsd-flag {
    user-select: none;
}

.menu__caret:before,
.menu__link--sublist:after {
    float: right;
}

.table-of-contents__link {
    height: 20px;
}

nav.navbar .dropdown__menu {
    min-width: 6rem;
    margin-left: 20px;
}

.navbar__logo {
    height: 2rem;
}

.navbar__logo_appendix {
    margin-left: -30px;
    font-weight: bold;
}

.navbar__logo_appendix_sidebar {
    display: block;
    position: absolute;
    top: 18px;
    left: 213px;
}

.main-wrapper {
    align-items: safe center;
}

.main-wrapper > div {
    width: calc(min(100%, var(--max-layout-width))) !important;
}

.main-wrapper a[class*='sidebarLogo'] img {
    height: 2rem;
}

.main-wrapper a[class*='sidebarLogo'] b {
    display: none;
}

html.plugin-pages {
    font-size: 18px;
    line-height: 32px;
}

html.plugin-pages h2 {
    font-size: 36px;
    line-height: 48px;
}

html.plugin-docs .theme-doc-markdown {
    font-size: 18px;
    line-height: 32px;
}

html.plugin-docs .theme-doc-markdown h1 {
    font-weight: 600;
    font-size: 48px;
    line-height: 64px;
    color: #000;
}

html[data-theme='dark'].plugin-docs .theme-doc-markdown h1 {
    color: #fff;
}

html.plugin-typedoc-api .theme-doc-markdown h1 {
    color: #000;
}

html[data-theme='dark'].plugin-typedoc-api .theme-doc-markdown h1 {
    color: #fff;
}

html.plugin-docs .theme-doc-markdown h2 {
    font-size: 36px;
    line-height: 48px;
}

html.plugin-docs .theme-doc-markdown h3 {
    font-size: 28px;
    line-height: 36px;
    /*color: #242736;*/
}

.theme-doc-toc-desktop .table-of-contents {
    font-size: 16px;
    line-height: 24px;
}

.theme-doc-sidebar-menu .menu__link,
.theme-doc-toc-desktop .table-of-contents .toc-highlight {
    height: auto;
    color: #6f7490;
    background: none;
}

.theme-doc-sidebar-menu .menu__link:hover {
    background: inherit;
}

.theme-doc-sidebar-menu .menu__link {
    font-weight: 400;
}

.theme-doc-sidebar-menu .menu__link--active {
    font-weight: 700;
}

.theme-doc-sidebar-menu .menu__list-item-collapsible,
.theme-doc-sidebar-menu .menu__list-item-collapsible--active {
    background: none;
}

.theme-doc-toc-desktop .table-of-contents .table-of-contents__link--active {
    font-weight: 700;
}

html[data-theme='dark'] .theme-doc-sidebar-menu .menu__link,
html[data-theme='dark'] .theme-doc-toc-desktop .table-of-contents .toc-highlight {
    color: #b3b8d2;
}

html[data-theme='dark'] .theme-doc-sidebar-menu .menu__link--active,
html[data-theme='dark'] .theme-doc-toc-desktop .table-of-contents .table-of-contents__link--active {
    color: #f2f3fb;
}

.theme-doc-sidebar-menu .menu__link:hover,
.theme-doc-sidebar-menu .menu__link--active,
.theme-doc-toc-desktop .table-of-contents .table-of-contents__link:hover,
.theme-doc-toc-desktop .table-of-contents .table-of-contents__link--active {
    color: #242736;
}

.hero {
    position: relative;
}

.apiItemContainer .tsd-readme h1:first-child {
    display: none;
}

@media (min-width: 997px) and (max-width: 1250px) {
    .navbar__items--right a.icon {
        display: none;
    }
}

@media (min-width: 997px) and (max-width: 1130px) {
    .navbar__link.changelog {
        display: none;
    }
}

@media (max-width: 1480px) {
    .navbar__item {
        padding: 4px 24px;
    }
}

@media (max-width: 1380px) {
    .navbar__item {
        padding: 4px 15px;
        font-size: 16px;
    }
}

@media (min-width: 997px) and (max-width: 1439px) {
    footer .col--offset-9 {
        --ifm-col-width: calc(4 / 12 * 100%);
        margin-left: calc(8 / 12 * 100%);
    }
}

@media (max-width: 400px) {
    .main-wrapper a[class*=sidebarLogo] img, .navbar__logo {
        height: 1.5rem;
    }
}

html .theme-doc-sidebar-container {
    border: 0;
}

html .theme-doc-sidebar-container button {
    border: 0;
    border-radius: 10px;
}

html .table-of-contents {
    border-left: 0;
}

html .table-of-contents ul {
    border-left: 2px solid #dfe2f5;
}

html.plugin-typedoc-api .theme-doc-sidebar-menu > li:first-child::before,
html.plugin-typedoc-api .theme-doc-sidebar-menu > li:nth-child(6)::before {
    text-transform: uppercase;
    font-size: 18px;
    line-height: 28px;
    color: #6f7490;
    padding: 20px 12px;
}

/*
html.plugin-typedoc-api .theme-doc-sidebar-menu > li:first-child::before {
    display: block;
    content: 'Core';
}

html.plugin-typedoc-api .theme-doc-sidebar-menu > li:nth-child(6)::before {
    display: block;
    content: 'Advanced';
    padding-top: 60px;
}
 */

#giscus-comments {
    display: block;
    margin-top: 50px;
}

.video-container {
    margin: 85px auto 0;
    max-width: 560px;
    overflow: hidden;
    position: relative;
    width: 100%;
    border-radius: 10px;
}

.yt-lite > .lty-playbtn {
    border: 0;
    cursor: pointer;
}

@media screen and (min-width: 768px) {
    .runnable-code-block .code-block.no-title pre + div {
        position: absolute;
        right: 170px;
        line-height: 28px;
    }
}

.runnable-code-block .code-block button {
    height: 36px;
    margin-top: 1px;
}

.runnable-code-block:hover .code-block button {
    opacity: 0.4;
}

html[data-theme='dark'] .runnable-code-block svg .apify-logo {
    fill: #fff;
}

/*
 * Reset the line-number counter for each .prism-code scope
 */
.prism-code {
    counter-reset: line-number;
}

/*
 * Notice the chained .language-ts class name to .prism-code
 * You can chain more languages in order to add line numbers
 */
.prism-code.language-ts .token-line::before,
.prism-code.language-typescript .token-line::before,
.prism-code.language-javascript .token-line::before,
.prism-code.language-json .token-line::before,
.prism-code.language-json5 .token-line::before,
.prism-code.language-python .token-line::before,
.prism-code.language-dockerfile .token-line::before,
.prism-code.language-XML .token-line::before,
.prism-code.language-js .token-line::before {
    counter-increment: line-number;
    content: counter(line-number);
    margin-right: calc(var(--ifm-pre-padding) * 0.8);
    text-align: right;
    min-width: 1.5rem;
    display: inline-block;
    opacity: .3;
    position: sticky;
    left: var(--ifm-pre-padding);
}

div[class^=announcementBar_] {
    background: #4585b6;
    color: #fff;
}

div[class^=announcementBar_] button {
    color: #fff;
}

.markdown blockquote {
    --ifm-alert-background-color: var(--ifm-color-info-contrast-background);
    --ifm-alert-background-color-highlight: rgba(84,199,236,.15);
    --ifm-alert-foreground-color: var(--ifm-color-info-contrast-foreground);
    --ifm-alert-border-color: var(--ifm-color-info-dark);
    --ifm-code-background: var(--ifm-alert-background-color-highlight);
    --ifm-link-color: var(--ifm-alert-foreground-color);
    --ifm-link-hover-color: var(--ifm-alert-foreground-color);
    --ifm-link-decoration: underline;
    --ifm-tabs-color: var(--ifm-alert-foreground-color);
    --ifm-tabs-color-active: var(--ifm-alert-foreground-color);
    --ifm-tabs-color-active-border: var(--ifm-alert-border-color);
    background-color: var(--ifm-alert-background-color);
    border: var(--ifm-alert-border-width) solid var(--ifm-alert-border-color);
    border-left-width: var(--ifm-alert-border-left-width);
    border-radius: var(--ifm-alert-border-radius);
    box-shadow: var(--ifm-alert-shadow);
    padding: var(--ifm-alert-padding-vertical) var(--ifm-alert-padding-horizontal);
}
